<script lang="ts" setup>
import { ref } from 'vue'
import { Right, Search, Close, Delete } from '@element-plus/icons-vue'
import userIcon from '@/components/userIcon.vue'
import historyIcon from '@/components/historyIcon.vue'
import clientDownLoad from '@/components/clientDownLoad.vue'
import { useWindowScroll } from '@vueuse/core'
import { RouterLink, useRouter, useRoute } from 'vue-router'
import { useSearchHistry } from '@/store/searchHistry'
const searchHistry = useSearchHistry()

// console.log(searchHistry.list)

const props = defineProps(['awaysBg', 'searchValue'])
const placeholder = ref('流浪地球2')

const searchInput = {
  searchValue: ref(props.searchValue || ''),
  focus: ref(false),
  timerId: 0,
  bindOutFocus: () => {
    searchInput.timerId = setTimeout(() => {
      searchInput.focus.value = false
    }, 200)
  },
  bindFocus: () => {
    searchInput.focus.value = true
    if (searchInput.timerId != 0) {
      clearTimeout(searchInput.timerId)
      searchInput.timerId = 0
    }
  }
}

function reload() {
  window.location.replace('/')
}

const { x, y } = useWindowScroll()

let router = useRouter()
let route = useRoute()
function toSearch(e?: string) {
  let searchValue = e || searchInput.searchValue.value || placeholder.value
  if (searchValue.length > 30) {
    ElMessage('搜索长度不得超过30字')
    return
  }

  searchHistry.addSearch(searchValue)
  let routeUrl = router.resolve(`/search?name=${searchValue}`)
  window.open(routeUrl.href, '_blank')
}
</script>
<template>
  <div id="headerBar" :class="{ showbg: y != 0 }" :style="`background: rgba(22, 22, 25, ${props?.awaysBg ? 1 : y / 200})`">
    <router-link @click="reload" to="/"><img src="@/assets/logoTitle.png" alt="" srcset="" /></router-link>
    <div class="searchBar" :class="{ 'searchBar-focus': searchInput.focus.value }">
      <div class="searchBar-tipBox" v-if="searchInput.focus.value">
        <div class="searchBar-tipBox-header">
          <div>搜索历史</div>
          <el-icon @click="searchHistry.clearSearch()"><Delete /></el-icon>
        </div>
        <div class="searchBar-tipBox-histry">
          <div class="searchBar-tipBox-histry-nohas" v-if="searchHistry.list.length == 0">暂无搜索历史~</div>
          <div @click="toSearch(name)" class="searchBar-tipBox-histry-btn" v-for="name in searchHistry.list" :key="name">{{ name }}</div>
        </div>
      </div>
      <div class="searchIcon">
        <el-icon><Search /></el-icon>
      </div>
      <el-input @keyup.enter.native="toSearch()" clearable type="text" v-model="searchInput.searchValue.value" :placeholder="placeholder" @focus="searchInput.bindFocus" @focusout="searchInput.bindOutFocus" />
      <div class="focusButton" @click="toSearch()">
        <el-icon><Right /></el-icon>
      </div>
    </div>
    <div class="rightBox">
      <div class="clientDownLoad">
        <clientDownLoad></clientDownLoad>
      </div>
      <div class="historyIcon">
        <historyIcon></historyIcon>
      </div>
      <userIcon></userIcon>
    </div>
  </div>
</template>
<style></style>
<style scoped lang="less">
.el-input {
  --el-input-border-color: rgba(0, 0, 0, 0);
  --el-input-focus-border-color: rgba(0, 0, 0, 0);
  --el-input-hover-border-color: rgba(0, 0, 0, 0);
}

.searchBar-tipBox {
  position: absolute;
  top: calc(100% - 10px);
  background: rgba(0, 0, 0, 0.9);
  width: 350px;
  border-radius: 10px;
  padding: 10px;

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;

    .el-icon {
      cursor: pointer;
    }
  }

  &-histry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    // margin-top: 20px;
    // margin-bottom: 20px;

    &-nohas {
      font-size: 12px;
      color: #777;
    }

    &-btn {
      text-align: center;
      min-width: 30px;
      cursor: pointer;
      color: #fff;
      margin-bottom: 10px;
      margin-right: 10px;
      max-width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      &:hover {
        color: rgb(1, 206, 205);
      }
    }
  }
}
.showbg {
  // background: rgba(22, 22, 25, 1) !important;
}
#headerBar {
  background: rgba(22, 22, 25, 0);
  display: flex;
  align-items: center;
  padding: 10px 30px;
  padding-right: 60px;
  color: rgb(225, 225, 225);

  img {
    height: 50px;
  }

  .searchBar {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    color: rgb(180, 186, 191);
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 350px;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    margin-left: 30px;
    // position: relative;

    .searchIcon {
      flex-shrink: 0;
      padding: 10px;
      // display: flex;
    }

    .el-input {
      background: rgba(22, 22, 25, 0);
      width: 100%;
      font-size: 15px;
      outline: none;
      color: rgb(225, 225, 225);

      * {
        box-shadow: none !important;
      }

      &:focus {
        border: none;
      }
      &::placeholder {
        color: rgb(180, 186, 191);
      }
    }

    .inputClear {
      display: none;
      cursor: pointer;
      padding: 10px;
    }

    .focusButton {
      display: none;
      background: rgb(1, 206, 205);
      padding: 10px;
      cursor: pointer;

      .el-icon {
        color: #000;
      }
    }

    &-focus {
      border-color: rgb(1, 206, 205);
      background: rgb(9, 11, 13);

      .focusButton {
        display: block;
      }

      .inputClear {
        display: block;
      }
    }
  }

  .rightBox {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
    .historyIcon {
      padding-right: 20px;
    }
    .clientDownLoad{
      padding-right: 15px;
    }
  }
}
</style>
